<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <say></say>
        <mains></mains>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let say = {
            template: `<div>
                <textarea cols="30" rows="10" v-model="ipt" @keyup.13="handlerClick"> </textarea>
                <button @click="handlerClick">发布</button>
                </div>`,
            data() {
                return {
                    ipt: ''
                }
            },
            methods: {
                handlerClick() {
                    if (this.ipt == '') {
                        alert('请输入内容')
                        return
                    }
                    bus.$emit('msg', this.ipt)
                    this.ipt = ''
                    console.log(11);
                }
            }
        }
        let mains = {
            template: `<div>
                <div v-for="(item,idx) in list">
            {{item.name}}
            {{item.contents}}
            {{item.time}}
            {{item.count}}
            <button @click="zan(item)">点赞</button>
            <button @click="top(item)">置顶</button>
            <button @click="del(item)">删除</button>
        </div>
                </div>`,
            data() {
                return {
                    list: [
                        {
                            id: 1,
                            name: 'alex',
                            contents: '今晚大盘的',
                            count: 0,
                            time: '2020-11-6'
                        },
                        {
                            id: 1,
                            name: 'alex',
                            contents: '今晚大盘的',
                            count: 0,
                            time: '2020-11-6'
                        },
                    ]
                }
            },
            created() {
                console.log(22);
                bus.$on('msg', (data) => {
                    this.list.push({
                        id: this.list.length,
                        name: 'xxx',
                        contents: data,
                        count: 0,
                        time: '2020-11-6'
                    })
                })
            },
            methods: {
                zan(item) {
                    item.count++
                },
                top(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                    this.list.unshift(item)
                },
                del(item) {
                    this.list.splice(this.list.indexOf(item), 1)
                }
            }
        }
        let bus = new Vue()
        let vm = new Vue({
            el: '#app',
            components: {
                say,
                mains,
            },
            data: {

            }
        })
    </script>
</body>

</html>